<template>
    <div class="sidebar" :class="[scrolled?'fixed':'']">

        <el-menu default-active="2" router unique-opened class="el-menu-vertical-demo"
            :default-active="$route.path"
            @open="handleOpen"
            @close="handleClose"
            >
            <!-- background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b" -->
            <li v-for="(item,index) in menuList" :key="index">
                <template v-if="role > item.role">
                    <!-- 不存在不集菜单  ****  结束 -->
                    <el-menu-item :index="item.url" class="111" v-if="!item.child">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.resourceName}}</span>
                    </el-menu-item>
                    <!-- 不存在子集菜单  ****  结束 -->
                    <!-- 存在子集菜单  ****  开始 -->
                    <el-submenu v-if="item.child" :index="item.resourceName" >
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.resourceName}}</span>
                        </template>
                        <el-menu-item-group>
                            <template v-for="(item_menu,index_menu) in item.child">
                                <template v-if="role > item_menu.role">
                                    <el-menu-item :index="item_menu.url">
                                        {{item_menu.resourceName}}
                                    </el-menu-item>
                                </template>
                            </template>
                        </el-menu-item-group>
                    </el-submenu>
                    <!-- 存在子集菜单  ****  结束 -->
                </template>
            </li>
        </el-menu>
    </div>
</template>

<script>
import { config } from "@/config.js";
import { menuList } from "@/menuList.js";
export default {
  props: ["scrolled"],
  data() {
    return {
      menuList: menuList,
      role:''
    };
  },
  mounted() {
    /*$(".sidebar").delegate(".menus h2","click",function(){
                            if($(this).parent().hasClass("cur")){
                                $(this).siblings("").slideDown(1000,function(){
                                    $(this).parent().removeClass("cur");
                                })
                            }else{
                                $(this).siblings("").slideUp(1000,function(){
                                    $(this).parent().addClass("cur").siblings("").removeClass("cur");
                                });
                            }
                        });*/
    // 获取用户名
    this.role =localStorage.getItem('role');
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    setSecondId(id) {
      localStorage.setItem(config.SECOND_MENU_ID, id);
    }
  }
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  float: left;
  overflow: hidden;
  padding: 10px 0 0 10px;
}
.el-menu-vertical-demo {
  width: 200px;
  overflow: hidden;
}
.el-menu-item,
.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.sidebar.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}
.el-menu-item.is-active {
  background: #e6f8f8;
}
</style>
